<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input
                v-model="searchList.name"
                placeholder="请输入搜索内容"
                class="btnScr"
                :xs="24"
                :sm="12"
                :lg="16"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                class="btnScrright"
                :xs="24"
                :sm="12"
                :lg="8"
                @click="search"
                >搜索</el-button
              >
            </el-col>
            <el-col :xs="24" :sm="8" :lg="4" class="agg">
              <el-select
                clearable
                v-model="searchList.roleId"
                placeholder="请选择角色"
                class="btnScr"
                @change="search"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="4" class="agg">
              <el-select
                clearable
                v-model="searchList.status"
                placeholder="请选择状态"
                class="btnScr"
                @change="search"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col
              :xs="24"
              :sm="8"
              :lg="10"
              class="agg"
              style="text-align: right"
            >
              <el-button class="add" @click="add">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog
      title=""
      width="600px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="show"
    >
      <h2>添加系统账号 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form
          ref="form"
          :model="newSystem"
          label-width="85px"
          class="formDiv"
          :rules="rules"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="11" :lg="11" class="">
              <el-form-item prop="mobile" label="账号:">
                <el-input v-model="newSystem.mobile" placeholder="输入账号" />
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="password" label="密码:" label-width="82px">
                <el-input
                  v-model="newSystem.password"
                  placeholder="只可输入6~18位字母数字"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="roleId" label="角色:">
                <el-select
                  v-model="newSystem.roleId"
                  placeholder="请选择"
                  @change="(val) => checkChange(newSystem.roleId)"
                >
                  <el-option
                    v-for="(it, i) in options"
                    :key="i"
                    :label="it.name"
                    :value="it.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="name" label="姓名:" label-width="82px">
                <el-select
                  v-if="!isInput"
                  v-model="newSystem.managerId"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="(item2, i) in manyName"
                    :key="i"
                    :label="item2.name"
                    :value="item2.id"
                  />
                </el-select>
                <el-input
                  v-else-if="isInput"
                  v-model="newSystem.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="22" :lg="22" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="newSystem.remark"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="disabled" type="primary" @click="save"
          >保存</el-button
        >
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>

<script>
import { getRoleList } from "@/api/resource";
import { establishList } from "@/api/system";
import { page } from "@/api/manager";
export default {
  components: {},
  data() {
    return {
      isInput: true,
      show: false,
      disabled: true,
      options: [],
      manyName: [],
      roleList: {
        page: 1,
        limit: 10000,
      },
      searchList: {
        name: "",
        roleId: "",
        status: "",
        page: 1,
        limit: 10,
      },
      newSystem: {
        roleId: "",
        name: "",
        remark: "",
        password: "",
        mobile: "",
        managerId: "",
      },
      textarea: "",
      statusOptions: [
        {
          label: "禁用",
          value: 0,
        },
        {
          label: "有效",
          value: 1,
        },
      ],
      filterName: [],
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
            pattern: /^1[3-9][0-9]{9}$/,
          },
        ],
        password: [
          {
            required: true,
            message: "只可输入6~18位字母数字",
            trigger: "blur",
            pattern: /^[A-Za-z0-9]{6,18}$/,
          },
        ],
        roleId: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.isInput ? "请输入姓名" : "请选择姓名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    newSystem: {
      handler(newVal, oldVal) {
        var reg1 = /^1[3-9][0-9]{9}$/;
        var reg2 = /^[A-Za-z0-9]{6,18}$/;
        if (!newVal.mobile || !newVal.password) {
          this.disabled = true;
          return;
        }
        var r1 = newVal.mobile.match(reg1);
        var r2 = newVal.password.match(reg2);
        var managerCheck = this.isInput ? newVal.name : newVal.managerId;
        if (r1 != null && r2 != null && newVal.roleId && managerCheck) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
  },
  created() {
    this.getRoleList();
  },
  mounted() {},
  methods: {
    tofilterName(val) {
      this.filterName = this.manyName.filter((item) => {
        return val ? item.name.includes(val) : true;
      });
    },
    async getRoleList() {
      var res = await getRoleList(this.roleList);
      this.options = res.data;
    },
    async checkChange(val) {
      const query = { page: 1, limit: 10000, type: null };
      var obj = {
        7: 4,
        2: 1,
        3: 1,
        6: 3,
        4: 2,
        5: 2,
      };

      if (obj[val] !== undefined) {
        query.type = obj[val];
        this.isInput = false;
        var res = await page(query);
        this.manyName = res.data.records;
      } else {
        this.newSystem.name = "";
        this.isInput = true;
      }
    },
    add() {
      this.show = true;
    },
    close() {
      this.show = false;
      this.newSystem = {
        roleId: "",
        name: "",
        remark: "",
        password: "",
        mobile: "",
      };
    },
    async save() {
      await establishList(this.newSystem);
      this.close();
      this.$parent.$emit("reRender", "");
    },
    search() {
      this.$parent.$emit("searchData", this.searchList);
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  background: #5ac6b7;
  color: #fff;
  border: 0;
  border-radius: 2px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px !important;
}
.btnScr {
  width: 100%;
  margin-bottom: 15px;
}
::v-deep .btnScr input {
  border-radius: 2px;
}
.btnScrright {
  border-radius: 2px;
  margin-top: -15px;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 1200px) {
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.rowPda {
  padding-right: 10px;
}
</style>

<style>
@media (min-width: 1200px) {
  .inputTop input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-moz-placeholder,
  textarea:-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }
}
</style>
